<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿菜鸟教程官网</title>
    <style>
        a,abbr,address,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,
        img,ins,label,legend,li,object,ol,p,pre,q,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,ul {
            border: 0;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 62.5%;
        }

        body {
            margin: 0;
            font-size: 1.2em;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            background: #f6f6f6 url(./assets/img/bg.gif) no-repeat;
            color: #333;
        }

        h1,h2,h3,h4 {
            font-size: 1em;
        }

        .col,
        .eightcol,
        .elevencol,
        .fifteencol,
        .fivecol,
        .fourcol,
        .fourteencol,
        .ninecol,
        .onecol,
        .sevencol,
        .sixcol,
        .tencol,
        .thirteencol,
        .threecol,
        .twelvecol,
        .twocol {
            margin-right: 1%;
            float: left;
        }

        .container {
            padding-left: 10px;
            padding-right: 10px;
        }

        .row {
            width: 100%;
            max-width: 1260px;
            min-width: 755px;
            margin: 0 auto;
            overflow: hidden;
        }

        .logo-search {
            margin-top: 17px;
            margin-bottom: 15px;
        }

        .logo,
        .tencol {
            width: 61.6%;
        }

        .logo h1 {
            background-image: url(./assets/img/runoob-logo.png);
            background-repeat: no-repeat;
            text-indent: -9999px;
            width: 258px;
            height: 39px;
            margin-top: 10px;
            margin-left: 20px;
            display: block;
        }

        h1 {
            margin: 0 0 10px 0;
            font-size: 2.1em;
            color: #64854c;
            text-decoration: none;
            text-indent: -9999px;
        }

        .logo a {
            width: 258px;
            height: 39px;
            display: block;
        }

        a {
            color: #64854c;
            text-decoration: none;
            -o-transition-duration: .2s;
            -o-transition-property: opacity;
            -webkit-transition-duration: .2s;
            -webkit-transition-property: opacity;
        }

        .search {
            text-align: right;
        }

        .last {
            margin-right: 0;
        }

        .footer-nav,
        .search,
        .sixcol {
            width: 36%;
        }

        .search form {
            background: #eeefed;
            padding: 0;
            margin: 0;
            padding: 5px;
            border-radius: 3px;
            margin: 5px 0 0 0;
            text-align: center;
        }

        .search input {
            line-height: 34px;
            left: 9px;
            top: 0;
            text-align: initial;
            white-space: nowrap;
            right: 9px;
            height: 35px;
            width: 94%;
            padding: 0 3% 0 3%;
            background-color: #fff;
            border: 1px solid #c8c8c8;
            border-radius: 3px;
            color: #ccc;
            font-weight: 400;
            font-size: 1.2em;
        }

        button,
        input,
        select,
        textarea {
            outline: 0;
        }

        button,
        input,
        select,
        td,
        textarea,
        th {
            font-size: 13px;
        }

        button,
        input,
        select,
        textarea {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        .navigation {
            background: #96b97d;
        }

        .container {
            padding-left: 10px;
            padding-right: 10px;
        }

        .nav {
            text-transform: uppercase;
        }

        .nav,
        .nav-sub,
        .profile-bar {
            padding: 10px 0 0 20px;
            height: 24px;
            font-size: 1.1em;
            font-family: proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        .nav,
        .nav-sub,
        .profile-bar,
        .row-login-desktop,
        .row-login-mobile,
        .sixteencol {
            width: 100%;
            float: left;
        }

        .nav ul,
        .nav-sub ul {
            list-style: none;
            white-space: nowrap;
        }

        ol,
        ul {
            list-style: none;
        }

        li,
        ol,
        p,
        ul {
            line-height: 1.5em;
        }

        .nav li,
        .nav-sub li {
            display: inline;
            margin: 0 20px 0 0;
        }

        .nav .current {
            background-image: url(./assets/img/navarrow.png);
            background-repeat: no-repeat;
            background-position: center bottom;
        }

        .nav li a {
            color: #fff;
        }

        .nav li a,
        .nav-sub li a {
            padding: 10px 0 10px 0;
            text-decoration: none;
        }

        a {
            color: #64854c;
            text-decoration: none;
            -o-transition-duration: .2s;
            -o-transition-property: opacity;
            -webkit-transition-duration: .2s;
            -webkit-transition-property: opacity;
        }

        .main {
            margin-top: 20px;
        }

        .container {
            padding-left: 10px;
            padding-right: 10px;
        }

        .fourcol,
        .left-column {
            width: 14%;
            display: block;
        }

        .middle-column-home {
            width: 78%;
            margin-right: 0;
            padding: 12px 20px;
            border: 1px solid #eaeaea;
            background-color: #fff;
            border-radius: 4px;
        }

        .tab {
            opacity: .7;
            padding-left: 4px;
            font-weight: 400;
            display: block;
            font-size: 1.2em;
            line-height: 1.9em;
            font-family: proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: grey;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .15);
            border: 1px solid rgba(0, 0, 0, .1);
            border-bottom: 0;
            -moz-border-top-left-radius: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
            -moz-border-top-right-radius: 3px;
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
            -moz-background-clip: padding;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            background-color: #f2f2f2;
            background-image: url(…Igd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
            background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
            background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
            background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
            background-image: linear-gradient(bottom, rgba(0, 0, 0, .05) -17%, rgba(255, 255, 255, .05) 117%);
        }

        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .gallery-list {
            padding: 0;
        }

        .sidebar-box {
            background: #fff;
            margin: 0 0 20px 0;
            padding: 4px;
            -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
            -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        }

        .design {
            padding: 4px;
            margin: 0;
            overflow: hidden;
        }

        .navto-nav {
            cursor: pointer;
            margin: 8px 2px;
            padding: 0;
            font-size: 14px;
        }

        .design:nth-child(even) {
            background: #fbfbfb;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
        }

        .codelist {
            overflow: hidden;
        }

        .codelist h2 {
            font-size: 18px;
            font-weight: 700;
            margin: 12px 0;
            border-bottom: 1px solid #eaeaea;
        }

        .codelist a.item-top {
            width: 28%;
            margin: 0 8px 10px 0;
            text-align: left;
            height: 80px;
            color: #bbb;
            background-color: #f6f6f6;
            border-radius: 5px;
            padding: 6px 16px;
        }

        .codelist a {
            width: 72px;
            margin: 0 5px 8px 5px;
            float: left;
            text-align: center;
            color: #999;
            font-size: 12px;
            height: 65px;
            overflow: hidden;
            text-decoration: none;
        }

        .codelist a.item-top h4 {
            color: #64854c;
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 1.1;
            text-align: left;
        }

        .codelist a.item-top .codeicon {
            float: left;
            margin-left: 10px;
            margin-right: 10px;
        }

        .codelist .codeicon {
            border-radius: 5px;
            margin: 0 auto;
            display: block;
            margin-bottom: 5px;
        }

        a img {
            border: 0;
        }

        .codelist a.item-top strong {
            display: block;
            color: #666;
            text-align: left;
        }

        #footer {
            min-width: 100%;
            margin-top: 20px !important;
        }

        #footer .runoob-block {
            background: #fff;
            border-top: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            padding-bottom: 50px;
        }

        #footer .runoob-block .runoob {
            width: 64%;
            margin: 0 auto;
            min-height: 200px;
        }

        #footer .runoob dl {
            width: 15%;
            padding-left: 30px;
            color: gray;
            margin: 25px 0;
            float: left;
            border-left: 1px solid #e4e4e4;
            min-height: 175px;
        }

        #footer .runoob dl dt {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        #footer .runoob dl dd {
            font-size: 12px;
            margin-top: 10px;
        }

        #footer .runoob a {
            color: gray;
            padding-left: 5px;
        }

        #footer .copyright {
            font-size: 12px;
            color: #999;
            margin: 0 auto;
            width: 100%;
            text-align: center;
            padding: 20px 0;
        }

        .copyright,
        .fivecol {
            width: 14%;
        }

        #footer .copyright a {
            color: #999;
        }

        #footer .search-share {
            width: 16%;
            float: left;
            min-height: 226px;
            border-left: 1px solid #e4e4e4;
            padding: 20px 0 0 40px;
        }

        #footer .search-share .app-download strong {
            font-size: 18px;
            color: #666;
            margin-bottom: 8px;
        }

        #footer .search-share .share {
            margin-top: 15px;
        }

        img {
            height: auto;
        }

        embed,
        img,
        object {
            max-width: 100%;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="container logo-search">
        <div class="row">
            <div class="col logo">
                <h1>
                    <a href="#">菜鸟教程 -- 学的不仅是技术，更是梦想！</a>
                </h1>
            </div>
            <div class="col search search-desktop last">
                <form action="#">
                    <input class="placeholder" placeholder="搜索..." autocomplete="off">
                </form>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="container navigation">
        <div class="row">
            <div class="col nav">
                <ul id="index-nav">
                    <li>
                        <a href="#" data-id="index" title="菜鸟教程" class="current">首页</a>
                    </li>
                    <li>
                        <a href="#" data-id="note" title="菜鸟笔记">菜鸟笔记</a>
                    </li>
                    <li>
                        <a href="#" title="不止于工具">菜鸟工具</a>
                    </li>
                    <li>
                        <a href="#" data-id="manual" title="参考手册">参考手册</a>
                    </li>
                    <li>
                        <a href="#" data-id="commentslist" title="英文文档集合">用户笔记</a>
                    </li>
                    <li>
                        <a href="#" data-id="quiz" title="测验/考试">测验/考试</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="container main">
        <div class="row">
            <div class="col left-column" id="main-left-cloumn">
                <div class="tab" id="cate0"><i class="fa fa-reorder"></i> 全部教程</div>
                <div class="sidebar-box gallery-list">
                    <div class="design" id="cate1">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> HTML / CSS</div>
                    </div>
                    <div class="design" id="cate2">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> JavaScript</div>
                    </div>
                    <div class="design" id="cate3">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> 服务端</div>
                    </div>
                    <div class="design" id="cate4">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> 数据库</div>
                    </div>
                    <div class="design" id="cate5">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> 移动端</div>
                    </div>
                    <div class="design" id="cate6">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> XML 教程</div>
                    </div>
                    <div class="design" id="cate7">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> ASP.NET</div>
                    </div>
                    <div class="design" id="cate8">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> Web Service</div>
                    </div>
                    <div class="design" id="cate9">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> 开发工具</div>
                    </div>
                    <div class="design" id="cate10">
                        <div class="navto-nav"><i class="fa fa-external-link"></i> 网站建设</div>
                    </div>

                </div>
            </div>
            <div class="col middle-column-home">
                <div class="codelist codelist-desktop cate1">

                    <h2><i class="fa fa-list"></i> HTML / CSS</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 HTML】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>HTML，即超文本标记语言（Hyper Text Markup Language）</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 HTML5】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>HTML5 是下一代 HTML 标准</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 CSS】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>层叠样式表（Cascading StyleSheet）</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 CSS3】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>CSS3是CSS技术的升级版本</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Bootstrap3】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Bootstrap4】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Bootstrap4 目前是 Bootstrap 的最新版本</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Font Awesome】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Foundation】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate2">

                    <h2><i class="fa fa-list"></i> JavaScript</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 JavaScript】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>JavaScript 是 Web 的编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 HTML DOM】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>HTML DOM 定义了访问和操作 HTML 文档的标准方法</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 jQuery】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>jQuery 是一个 JavaScript 库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 AngularJS】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>AngularJS 通过新的属性和表达式扩展了 HTML</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 AngularJS2】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>AngularJS2 是一款开源JavaScript库，由Google维护。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Vue.js】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Vue.js 是一套构建用户界面的渐进式框架。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 React】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>React 是一个用于构建用户界面的 JAVASCRIPT 库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 TypeScript】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 jQuery UI】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>jQuery UI 是建立在 jQuery上的一组用户界面交互、特效、小部件及主题</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 jQuery EasyUI 】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Node.js】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Node.js 是运行在服务端的 JavaScript</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 AJAX】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 JSON】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>JSON 是存储和交换文本信息的语法</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Echarts】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>ECharts 是一个使用 JavaScript 实现的开源可视化库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Highcharts】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Highcharts 是一个用纯JavaScript编写的一个图表库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Google 地图】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Google 地图接口使用说明</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate3">

                    <h2><i class="fa fa-list"></i> 服务端</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 Python】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Python3.x 版本，未来主流版本。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Python2.x】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Python 是一种面向对象、解释型计算机程序设计语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Linux】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Linux是一套免费使用和自由传播的类Unix操作系统</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Docker】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Docker 是一个开源的应用容器引擎，基于 Go 语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Ruby】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Java】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一种可以撰写跨平台应用软件的面向对象的程序设计语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 C】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一门通用计算机编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 C++】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>C++是在C语言的基础上开发的一种通用编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Perl】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Perl 是高级、通用、直译式、动态的程序语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Servlet 】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>运行在 Web 服务器或应用服务器上的程序</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 JSP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>JSP与PHP、ASP、ASP.NET等语言类似，运行在服务端的语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Lua】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Lua 是一种轻量小巧的脚本语言，用标准C语言编写并以源代码形式开放</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Rust】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Rust 语言是一种高效、可靠的通用高级语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 R】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>R 语言是为数学研究工作者设计的一种数学编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Scala】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Scala 是一门多范式（multi-paradigm）的编程语言。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Go】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Go语言是谷歌推出的一种全新的编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 PHP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>PHP 是一种通用开源脚本语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Django】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Django 是一个开放源代码的Web应用框架，由Python写成</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Zookeeper】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【设计模式】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【正则表达式】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>正则表达式是对字符串操作的一种逻辑公式</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Maven】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Maven 是一个项目管理工具，可以对 Java 项目进行构建、依赖管理。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 NumPy】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>NumPy 是 Python 语言的一个扩展程序库，支持大量的维度数组与矩阵运算。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Verilog】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Verilog 是一种用于设计数字电路的硬件描述语言，主要应用在集成电路系统中。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 ASP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>ASP（Active Server Pages 动态服务器页面）是一种生成动态交互性网页的强有力工具</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 AppML】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>AppML 是一个为web应用程序设计的HTML扩展框</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 VBScript】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一种微软环境下的轻量级的解释型语言</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate4">

                    <h2><i class="fa fa-list"></i> 数据库</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 SQL】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>结构化查询语言(Structured Query Language)</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Mysql】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>MySQL是一个关系型数据库管理系统</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 PostgreSQL】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS)</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 SQLite】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一款轻型的数据库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 MongoDB】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql)</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Redis】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>一个高性能的key-value数据库</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Memcached】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Memcached是一个自由开源的，高性能，分布式内存对象缓存系统。</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate5">

                    <h2><i class="fa fa-list"></i> 移动端</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 Android】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Android 是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Swift】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Swift 是一种支持多编程范式和编译式的编程语言,用于开发 iOS，OS X 和 watchOS应用程序。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 jQuery Mobile】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>jQuery Mobile是jQuery 在手机上和平板设备上的版本</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 ionic】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Kotlin】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>在 Java 虚拟机上运行的静态类型编程语言，Android 官方开发语言</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate6">

                    <h2><i class="fa fa-list"></i> XML 教程</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 XML】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XML 被设计用来传输和存储数据</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 DTD】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>DTD（文档类型定义）的作用是定义 XML 文档的合法构建模块</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XML DOM】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XML DOM 定义访问和操作XML文档的标准方法</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XSLT】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XSL 是一个 XML 文档的样式表语言，XSLT 指 XSL 转换</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XPath】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XPath 是一门在 XML 文档中查找信息的语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XQuery】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XQuery 被设计用来查询 XML 数据</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XLink】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XLink 定义在 XML 文档中创建超级链接的标准方法</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XPointer】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XPointer是在可扩展标志语言（XML）文件中定位数据的一种语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XML Schema】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XML Schema 描述了 XML文档的结构</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 XSL-FO】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>XSL-FO 指可扩展样式表语言格式化对象</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 SVG】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>SVG 使用 XML 格式定义图像</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate7">

                    <h2><i class="fa fa-list"></i> ASP.NET</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 ASP.NET】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 C#】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>C# 是一个简单的、现代的、通用的、面向对象的编程语言</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Web Pages】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Web Pages 是三种网页编程模型中的一种，用于创建网站和web 应用程序</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Razor】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Razor 是一种标记语法，可以让您将基于服务器的代码（Visual Basic 和 C#）嵌入到网页中</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 MVC】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>MVC（Model View Controller 模型-视图-控制器）</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Web Forms】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Web Forms 是三种创建 ASP.NET 网站和 Web 应用程序的编程模式中的一种</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate8">

                    <h2><i class="fa fa-list"></i> Web Service</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 Web Service】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Web Service 脚本平台需支持 XML + HTTP</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 WSDL】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>WSDL是一门基于 XML 的语言，用于描述 Web Service 以及如何对它们进行访问</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 SOAP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>SOAP 是一种简单的基于 XML 的协议，它使应用程序通过 HTTP 来交换信息</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 RSS】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>RSS基于XML标准，在互联网上被广泛采用的内容包装和投递协议</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 RDF】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>DF(资源描述框架)是描述网络资源的 W3C 标准</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate9">

                    <h2><i class="fa fa-list"></i> 开发工具</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 Eclipse】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Git】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Svn】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong> SVN 是一个开放源代码的版本控制系统</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 Markdown】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>Markdown 是一种轻量级标记语</strong>
                    </a>
                </div>
                <div class="codelist codelist-desktop cate10">

                    <h2><i class="fa fa-list"></i> 网站建设</h2>


                    <a class="item-top item-1" href="#">
                        <h4>【学习 HTTP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【网站建设指南】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>网站建设指导课程</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【浏览器信息】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>对于网站开发人员来说，浏览器信息和统计数据都是非常重要的</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【网站主机教程】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>如果您希望向全世界发布自己的网站，那么您的网站就需要被放置于一个 WEB 服务器</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 TCP/IP】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>TCP/IP 是因特网的通信协议</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【学习 W3C】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>W3C 让每个人都能在互联网上分享资源</strong>
                    </a>

                    <a class="item-top item-1" href="#">
                        <h4>【网站品质】</h4>
                        <img class="codeicon codeicon-36" height="36" width="36"
                            src="">
                        <strong>学习如何创建高质量的web网站</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div id="footer" class="mar-t50">
        <div class="runoob-block">
            <div class="runoob cf">
                <dl>
                    <dt>
                        在线实例
                    </dt>
                    <dd>
                        ·<a target="_blank" href="#">HTML 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">CSS 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">JavaScript 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">Ajax 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">jQuery 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">XML 实例</a>
                    </dd>
                    <dd>
                        ·<a target="_blank" href="#">Java 实例</a>
                    </dd>

                </dl>
                <dl>
                    <dt>
                        字符集&amp;工具
                    </dt>
                    <dd>
                        · <a target="_blank" href="#">HTML 字符集设置</a>
                    </dd>
                    <dd>
                        · <a target="_blank" href="#">HTML ASCII 字符集</a>
                    </dd>
                    <dd>
                        · <a target="_blank" href="#">HTML ISO-8859-1</a>
                    </dd>
                    <dd>
                        · <a target="_blank" href="#">HTML 实体符号</a>
                    </dd>
                    <dd>
                        · <a target="_blank" href="#">HTML 拾色器</a>
                    </dd>
                    <dd>
                        · <a target="_blank" href="#">JSON 格式化工具</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        最新更新
                    </dt>
                    <dd>
                        ·
                        <a href="#" title="Window postMessage() 方法">Window postMess...</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 表单">Vue3 表单</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 事件处理">Vue3 事件处理</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 样式绑定">Vue3 样式绑定</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 监听属性">Vue3 监听属性</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 组件">Vue3 组件</a>
                    </dd>
                    <dd>
                        ·
                        <a href="#" title="Vue3 计算属性">Vue3 计算属性</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        站点信息
                    </dt>
                    <dd>
                        ·
                        <a target="_blank" href="#" rel="external nofollow">意见反馈</a>
                    </dd>
                    <dd>
                        ·
                        <a target="_blank" href="#">免责声明</a>
                    </dd>
                    <dd>
                        ·
                        <a target="_blank" href="#">关于我们</a>
                    </dd>
                    <dd>
                        ·
                        <a target="_blank" href="#">文章归档</a>
                    </dd>
                </dl>
                <div class="search-share">
                    <div class="app-download">
                        <div>
                            <strong>关注微信</strong>
                        </div>
                    </div>
                    <div class="share">
                        <img width="128" height="128" src="./assets/images/qrcode.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="w-1000 copyright">
            Copyright © 2013-2021 <strong><a href="#" target="_blank">菜鸟教程</a></strong>&nbsp;
            <strong><a href="#" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：
            <a target="_blank" rel="nofollow" href="#">闽ICP备15012807号-1</a>
        </div>
    </div>
</body>

</html>